<template>
  <div>
    <main-nav index="3"></main-nav>
    <ul class="fake-tabs">
      <li>
        <a
          href="javascript:;"
          :class="{active: query.onlyMine == false}"
          @click="query.onlyMine=false"
        >笔记广场</a>
      </li>
      <li>
        <a
          href="javascript:;"
          :class="{active: query.onlyMine == true}"
          @click="query.onlyMine=true"
        >我的笔记</a>
      </li>
    </ul>
    <div class="container margin-top-15">
      <i-card dis-hover :bordered="false">
        <p slot="title">筛选笔记</p>
        <i-form @submit.native.prevent="search()">
          <filters @changed="filterChanged" :editionsVisible="false"></filters>
        </i-form>
      </i-card>
      <div class="main-container">
        <i-radio-group v-model="query.orderBy" type="button" class="margin-top-10 order-by-items">
          <i-radio label="CreatedAtDesc">发布时间</i-radio>
          <i-radio label="RecommendedDesc">推荐数</i-radio>
        </i-radio-group>
        <div class="note-items">
          <note-item
            @search="search()"
            @edit="editNote(item)"
            :data="item"
            v-for="(item, index) in notes"
            :key="'note_' + index"
          ></note-item>
        </div>
        <p v-show="totalNotes === 0">暂无数据</p>
        <i-page
          v-show="totalNotes"
          :page-size="20"
          :total="totalNotes"
          style="text-align: center"
          :current="query.page"
          size="small"
          @on-change="search"
          show-total
          show-elevator
        ></i-page>
      </div>
    </div>
    <note-form ref="note-form"></note-form>
  </div>
</template>

<script>
import { mapGetters, mapActions } from 'vuex'
import Filters from '../components/filters'
import MainNav from '../components/main-nav'
import NoteItem from '../components/note-item'
import NoteForm from '../components/note-form'
export default {
  data() {
    return {
      query: {
        orderBy: 'CreatedAtDesc',

        grade: null,
        onlyMine: false,
        subject: null,
        page: 1
      }
    }
  },
  components: {
    MainNav,
    Filters,
    NoteItem,
    NoteForm
  },
  computed: {
    ...mapGetters({
      totalNotes: 'totalNotes',
      notes: 'notes'
    })
  },
  watch: {
    'query.onlyMine'() {
      this.search()
    },
    'query.orderBy'() {
      this.search()
    }
  },
  methods: {
    ...mapActions({
      searchNotes: 'searchNotes'
    }),
    search(page) {
      this.query.page = page || 1
      this.searchNotes(this.query)
    },
    filterChanged(data) {
      this.query.grade = data.grade
      this.query.subject = data.subject

      this.search()
    },
    editNote(item) {
      this.$refs['note-form'].new({
        id: item.id,
        courseId: item.courseId,
        title: item.title,
        tags: item.tags,
        description: item.description,
        subject: item.subject,
        grade: item.grade
      })
    }
  },
  mounted() {
    this.search()
  }
}
</script>

<style lang="less" scoped>
.note-items {
  // background: white;
  margin-top: 10px;
}
</style>
